<!--
@props:
  fileData     Object  文件对象
  uploadUrl    String  上传的地址
  uploadParam  Object  上传时附带的参数
  deleteUrl    String  文件删除的地址
@event
  onClose      (Array) 组件销毁前最后保存的文件数组，用于记忆上传过的文件
-->
<template>
  <div>
    <!--正在上传或上传完的的文件列表-->
    <div class="file-list" v-if="!!fileData.path">
        <img src="../../assets/img/file.png" alt="图片加载失败"/>
        <div class="file-list-cover">
          <Icon type="ios-download-outline" @click.native="handleDownload(fileData.id)"></Icon>
          <Icon v-if="canOperate" type="ios-trash-outline" @click.native="handleRemove(fileData)"></Icon>
        </div>
    </div>
    <div v-if="isUploading" class="file-list">
      <Progress :percent="percentage" hide-info></Progress>
    </div>
    <!--上传文件按钮-->
    <Upload
      v-if="canOperate && !fileData.path && !isUploading"
      ref="upload"
      :action="absoluteUploadUrl"
      :data="requestParam"
      :show-upload-list="false"
      :default-file-list="[fileData]"
      :on-success="handleSuccess"
      :on-progress="handleProgress"
      :format="['apk']"
      accept="application/vnd.android.package-archive"
      :max-size="102400"
      :on-format-error="handleFormatError"
      :on-exceeded-size="handleExceededSize"
      :beforeUpload="handleBeforeUpload"
      style="display: inline-block;width: 58px;"
      multiple
      type="drag">
      <div style="width: 58px;height: 58px;line-height: 58px;">
        <Icon type="ios-cloud-upload-outline" size="20"></Icon>
      </div>
    </Upload>
  </div>
</template>

<script>

  import {appendRequestParam, doDelete} from "../../assets/js/utils/RequestUtils";
  import {CONTEXT_PATH, getAuthorizedFunction} from "../../assets/js/global";
  import {ADD, DELETE} from "../../assets/js/enum/FunctionType";
  import {SUCCESS} from "../../assets/js/enum/RequestResult";

  export default {
    name:"FileList",
    props:{
      fileData:{
        type: Object,
        required:true
      },
      uploadUrl:{
        type:String,
        required:true
      },
      downloadUrl:{
        type:String,
        required:true
      },
      uploadParam:{
        type:Object,
        required:true
      },
      deleteUrl:{
        type:String,
        required:true
      },
      canOperate:{
        type:Boolean,
        default:true
      }
    },
    data() {
      return {
        isUploading:false,
        percentage:0
      }
    },
    computed: {
      requestParam() {
        return {
          ...this.uploadParam,
          tokenId:localStorage.getItem("tokenId"),
          menuFunctionId:getAuthorizedFunction(this, ADD),
        }
      },
      absoluteUploadUrl() {
        return CONTEXT_PATH + this.uploadUrl;
      },
      absoluteDownloadUrl() {
        return CONTEXT_PATH + this.downloadUrl;
      }
    },
    methods:{
      handleDownload(id) {
        window.location.href = this.absoluteDownloadUrl+"?tokenId="+localStorage.getItem("tokenId")+"&id="+id;
      },
      handleRemove(file) {
        this.$confirm("确定移除文件？", "提示", {
          confirmButtonText:"确定",
          cancelButtonText:"取消",
          type:"warning"
        }).then(()=>{
          doDelete(this.deleteUrl, {
            data:file,
            menuFunctionId:getAuthorizedFunction(this, DELETE),
            component:this
          }).then(response=>{
            if(response.status === SUCCESS) this.$emit("onRemove");
            this.$message({message: response.message, type: response.status.toLowerCase()})
          });
        })
      },
      handleSuccess(response, file) {
        this.isUploading = false;
        file.path = response.content.path;
        this.$emit("onSuccess", file);
      },
      handleFormatError(file) {
        this.isUploading = false;
        this.$alert("文件格式错误,请选择android安装文件", "提示");
      },
      handleExceededSize(file) {
        this.isUploading = false;
        this.$alert("文件"+file.name+"太大，上传的文件不能超过100M，请压缩后再上传", "提示");
      },
      handleBeforeUpload() {
        this.isUploading = true;
        this.percentage = 0;
      },
      handleProgress(event) {
        this.percentage = event.percent;
      }
    },
    beforeDestroy() {
      this.$emit("onClose", this.uploadList);
    },
    mounted () {
      if(!!this.$refs["upload"]) this.uploadList = this.$refs["upload"].fileList;
    }
  }
</script>

<style scoped>
  .file-list {
    display: inline-block;
    width: 60px;
    height: 60px;
    text-align: center;
    line-height: 60px;
    border: 1px solid transparent;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
    position: relative;
    box-shadow: 0 1px 1px rgba(0,0,0,.2);
    margin-right: 4px;
  }
  .file-list img {
    width: 100%;
    height: 100%;
  }
  .file-list-cover {
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,.6);
  }
  .file-list:hover .file-list-cover {
    display:block;
  }
  .file-list-cover i {
    color:#fff;
    font-size:20px;
    cursor:pointer;
    margin:0 2px;
  }
</style>



// WEBPACK FOOTER //
// File.vue?7b9386a2
